<script setup lang="ts">
import { ref } from 'vue'
import SideDialog from './SideDialog.vue'

import ControlPanel from './ControlPanel.vue'
const btnList = ['继续任务', '指点飞行', '无人机悬停', '立即返航 ']
const multiple = ref<number>(3)
const modelDialogRef = ref<InstanceType<typeof SideDialog> | null>(null)
const flyDialogRef = ref<InstanceType<typeof SideDialog> | null>(null)
const openDialog = () => {
  modelDialogRef.value?.show()
}
const changeMutiple = (status: string) => {
  if (status === 'add') {
    multiple.value++
  } else {
    if (multiple.value <= 1) return
    multiple.value--
  }
}
const controlClick = (index: number) => {
  // 如果是指点飞行，指点飞行弹窗
  if (index === 1) {
    flyDialogRef.value?.show()
  }
}
</script>
<template>
  <div class="machine-box">
    <SideDialog ref="flyDialogRef" title="指点飞行" status="moreControl"></SideDialog>

    <SideDialog ref="modelDialogRef" status="modelChange"></SideDialog>
    <div class="title-box relative">
      <span style="margin-left: 40px">无人机控制</span>
      <div
        @click="openDialog"
        class="bg-#398fed absolute h-90% right-[0] text-center w-25% cursor-pointer"
        style="line-height: 30px; font-weight: 500; font-size: 15px"
        >模式切换
      </div>
    </div>
    <div class="content-box">
      <div class="left">
        <ControlPanel />
      </div>
      <div class="right">
        <div class="direction-cont">
          <div class="plus-box" @click="changeMutiple('add')">+</div>
          <div class="center-box"> 倍数：{{ multiple }}X </div>
          <div class="plus-box" @click="changeMutiple('minus')">-</div>
        </div>
        <div class="btn-box">
          <div
            v-for="(item, index) in btnList"
            :key="index"
            class="btn-item"
            @click="controlClick(index)"
            >{{ item }}</div
          >
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.machine-box {
  margin-bottom: 5px;
  background: rgba(9, 36, 74, 0.9);
  .title-box {
    background: url('@/assets/bit-screen/schedule-mge/title_bg.png') center left;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    padding-right: 24px;
    align-items: center;
    height: 34px;
    color: #d9e4f2;
  }
  .content-box {
    display: flex;
    padding: 15px 10px;
    padding-right: 20px;
    justify-content: space-between;
    font-size: 14px;

    .right {
      display: flex;
      flex-direction: column;
      width: 60%;
      .direction-cont {
        width: 100%;
        text-align: center;
        display: flex;
        height: 32px;

        .plus-box {
          width: 32px;
          line-height: 28px;
          background: linear-gradient(0deg, #3b92ef, #3c82de);
          border: 1px solid #ffffff;
          cursor: pointer;
        }
        .center-box {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(53, 107, 196, 0.5);
        }
      }
      .btn-box {
        border-radius: 2px;
        margin-top: 10px;
        height: 65%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px; // 添加间隙，可以根据需要调整
        font-size: 14px;

        .btn-item {
          background: rgba(33, 111, 163, 0.45);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 2px;
          border: 1px solid #008cff;
          text-shadow: 0px 4px 6px rgba(0, 24, 72, 0.49);
          &:hover {
            background: linear-gradient(184deg, #01a7fc, #0665cb);
            cursor: pointer;
          }
        }
        :nth-child(4) {
          background: rgba(211, 165, 19, 0.6);
          border: 1px solid #cdad1f;
          &:hover {
            background: #d3a513;
          }
        }
      }
    }
  }
}
/* 当视口高度大于或等于880px时，应用这些样式 */
@media screen and (min-height: 950px) {
  .machine-box {
    .content-box {
      padding: 20px 15px;
    }
  }
}
</style>
